<!-- 详情页 -->
<template>
    <div id="details">
        <div class="top">
            <div class="left">
                <i class="iconfont" @click="onClickLeft">&#xe601;</i>
            </div>
            <img src="https://m.hua.com/content/vue/login/static/img/m_hualogo.png" alt="">
            <div class="right">
                <i class="iconfont" @click="onClickRight">&#xe602;</i>
            </div>
            <headerlb v-show="show"></headerlb>
        </div>
        <div class="swiper">
            <van-swipe @change="onChange" autoplay='2000'>
                <van-swipe-item><img src="../../assets/imgage/10001.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/imgage/10001.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/imgage/10001.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/imgage/10001.jpg" alt=""></van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/4</div>
                </template>
            </van-swipe>
        </div>
        <div class="content">
            <div class="content-top">
                <div class="content-top-left">
                    {{data.Instro}}
                    <!-- 百事合意/粉玫瑰香水百合大号-戴安娜玫瑰19枝、白色香水百合2枝、尤加利叶10枝<span>新品上线</span> -->
                </div>
                <div class="content-top-right">
                    <i class="iconfont">&#xe62e;</i>
                </div>
            </div>
            <div class="content-btm">
                <div class="content-btm-left">
                    <span class="price">￥{{data.Price}}</span>

                    <span class="price1">￥369</span>
                </div>
                <div class="content-btm-right">
                    已售<span class="number">{{data.Sales}}</span>件
                </div>
            </div>
        </div>
        <div class="media">
            <div class="left">
                <img src="https://img02.hua.com/m/2021_img/hua-logo.jpg" alt="">
            </div>
            <div class="center">
                小程序下单立减5元
            </div>
            <div class="right">
                <i class="iocnfont">></i>
            </div>
        </div>
        <div class="media1">
            <div class="left">
                已选
            </div>
            <div class="center">
                戴安娜玫瑰19枝
            </div>
            <div class="right">
                ···
            </div>
        </div>
        <div class="media2">
            <div class="left">
                配送至
            </div>
            <div class="center">
                <i class="iconfont">&#xe64e;</i>
                请选择配送地区
            </div>
            <div class="right">
                ···
            </div>
        </div>
        <section class="detailsinfo">
            <div class="detailsinfo-item">
                <div class="left">
                    花语
                </div>
                <div class="right">
                    百合花开，幸福自来，手执玫瑰，挚爱此生。
                </div>
            </div>
            <div class="detailsinfo-item">
                <div class="left">
                    材料
                </div>
                <div class="right">
                    戴安娜玫瑰19枝、白色香水百合2枝、尤加利叶10枝
                </div>
            </div>
            <div class="detailsinfo-item">
                <div class="left">
                    包装
                </div>
                <div class="right">
                    嫣粉/玫粉色欧雅纸7张、白色雪梨纸2张、樱花粉色罗纹烫金丝带2米
                </div>
            </div>
            <div class="detailsinfo-item">
                <div class="left">
                    配送
                </div>
                <div class="right">
                    全国
                </div>
            </div>
            <div class="detailsinfo-item">
                <div class="left">
                    附送
                </div>
                <div class="right">
                    下单填写留言，即免费赠送精美贺卡！。
                </div>
            </div>
        </section>
        <section class="well">
            <div class="well-title">
                <h4>为什么选择我们</h4>
            </div>
            <div class="well-body">
                <ul class="list">
                    <li>
                        <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="">
                        <p>鲜花龙头企业</p>
                    </li>
                    <li>
                        <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="">
                        <p>鲜花龙头企业</p>
                    </li>
                    <li>
                        <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="">
                        <p>鲜花龙头企业</p>
                    </li>
                    <li>
                        <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="">
                        <p>鲜花龙头企业</p>
                    </li>
                    <li>
                        <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="">
                        <p>鲜花龙头企业</p>
                    </li>
                    <li>
                        <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="">
                        <p>鲜花龙头企业</p>
                    </li>
                </ul>
            </div>
        </section>
        <van-goods-action>
            <van-goods-action-icon icon="service-o" text="客服" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="jump" />
            <van-goods-action-button class="dataBtn" color="#3D4D42" type="warning" text="加入购物车" @click="addData" />
            <van-goods-action-button class="dataBtn" color="#FF734C" type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
import headerlb from '../login/components/HeaderLB.vue'
export default {
    name: "Details",
    data() {
        return {
            show: false,
            current: 0,
            data:this.$store.state.Details,//数据
        }
    },
    components: {
        headerlb
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onClickRight() {
            this.show = !this.show
        },
        onChange(index) {
            this.current = index;
        },
        addData(){
            console.log(1);
            this.$store.commit("Addshop", this.data);
            this.$router.push('/CartList')
        },
        jump(){
            this.$router.push('/CartList')
        }
    }

}
</script>
<style scoped lang="less">
body {
    background: #F3F5F7;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .88rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background-color: #fff;

    .left {
        width: .9rem;
        height: .9rem;
        text-align: center;

        i {
            line-height: .9rem;
            font-size: .4rem;
        }
    }

    .right {
        width: .9rem;
        height: .9rem;
        text-align: center;

        i {
            line-height: .9rem;
            font-size: .4rem;
        }
    }

    img {
        width: 3rem;
        height: .4rem;
    }
}

.swiper img {
    width: 100%;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 15px;
    padding: 2px 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
}

.content {
    background-color: #fff;
}

.content-top {
    display: flex;
    justify-content: space-between;
    flex: 1;
    padding:.4rem 0;
    margin:0 .4rem 0;
    font-size: 14px;
    word-spacing: 8px;
    letter-spacing: 1px;
    background-color: #fff;

    span {
        color: #FF734C;
        margin-left: 5px;
    }

    .content-top-right i {
        font-size: .4rem;
    }
}

.content-btm {
    display: flex;
    justify-content: space-between;
    padding-bottom:.2rem;

    .content-btm-left {
        margin-left: .4rem;

        .price {
            font-size: .5rem;
            color: #FF734C;
            font-weight: 600;
        }

        .price1 {
            color: #ccc;
            text-decoration: line-through;
        }
    }

    .content-btm-right {
        margin-right: .4rem;

    }
}

.media {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: .4rem;

    .left img {
        width: .8rem;
        height: .8rem;
    }

    .center {
        margin-left: -2.5rem;
    }
}

.media1 {
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: .4rem;

    .center {
        margin-left: -3rem;
    }

    .left {
        font-size: 0.2rem;
        font-weight: bold;
    }

    .right {
        font-size: .4rem;
        font-weight: bold;
    }
}

.media2 {
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: .4rem;

    .center {
        margin-left: -2.8rem;
    }

    .left {
        font-size: 0.2rem;
        font-weight: bold;
    }

    .right {
        font-size: .4rem;
        font-weight: bold;
    }
}

.detailsinfo {
    margin-bottom: .2rem;
    // padding: .4rem;
    padding-left: 0;
    background: #fff;
    font-size: .15rem;
}

.detailsinfo-item {
    margin-left: .4rem;
    display: flex;
    align-items: center;

    .left {
        font-weight: bold;
        width: .5rem;
        padding-right: .4rem;
    }

    .right {
        border-bottom: 1px solid #f1f1f1;
        width: 6rem;
        padding: .35rem 0;
    }
}

.well {
    background-color: #fff;
    padding-bottom: 1rem;

    .well-title {
        text-align: center;
        padding: .5rem .5rem .7rem .5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .32rem;
    }

    .well-body .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        
        li {
            width: 2.3rem;
            text-align: center;
            margin-bottom: .4rem;
            font-size: .2rem;

            img {
                width: 1.28rem;
                height: 1.28rem;
            }
        }
    }
}
.van-button--large{
    margin:0;
    height:100%;

}
.details .dataBtn{
    margin: auto;
    height:100%;
}
.van-goods-action-button--first,.van-goods-action-button--last{
    border-radius: 0;
}
</style>